<template>
    <div>
        测试 Nuxt --- {{title}}
        <ul>
            <li v-for = "item in channels" :key="item.id">{{item.name}}</li>
        </ul>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name:'HomeIndex',
    data(){
        return {
            title:'hello',
            channels: []
        }
    },
    /** 
     * asyncData 是 Nuxt 专门提供的一个生命周期函数
     * 它只会在两个地方调用
     *      1. 服务端渲染的时候
     *      2. 客户端路由导航的时候
     * 我们可以把需要能被 SEO 的数据请求写在这里
     * 它返回一个对象，对象中的数据会和 data 中的数据混合在一起以供页面使用
     * 注意：这里没有 this 实例
     * 
     * 如果需要在初始化的时候发请求拿数据渲染页面，两个地方
     *  1. 如果需要 SEO 选择 asyncData，因为 asyncData 会在服务端渲染的时候调用
     *  2. 如果不需要 SEO 选择 mounted 只有页面到了客户端以后执行了代码才会触发 mounted 然后在客户端请求处理
     * 
     * 建议：
     *     如果动态显示的内容不需要 SEO ，可以写在 mounted 中
     *     如果动态显示的内容需要SEO 必须写在 asyncData 中
     */
    // async asyncData() {
    //     console.log('-----asyncData-----')
    //     const { data } = await axios({
    //         method:'GET',
    //         url:'http://ttapi.research.itcast.cn/app/v1_0/channels'
    //     })

    //     return {
    //         channels: data.data.channels
    //     }
    // },
    beforeCreate() {
        console.log('-----beforeCreate-----')
    },
    created(){
        console.log('-----created-----')
    },
    beforeMount() {
        console.log('-----beforeMount-----')
    },
    async mounted() {
        console.log('-----mounted-----')

        const { data } = await axios({
            method:'GET',
            url:'http://ttapi.research.itcast.cn/app/v1_0/channels'
        })

        this.channels = data.data.channels
    },
    beforeUpdate() {
        console.log('-----beforeUpdate-----')
    },
    updated() {
        console.log('-----updated-----')
    }
}
</script>